<!--课程管理-->
<template lang="pug">
  kalix-master
    div.PersonalCenter
      div.bgc
        img(src="/static/PersonalCenter/背景图_u3060.jpg")
      div.personal
        div.personal-left
          div.HeadPortrait
            <!--img(src="static/PersonalCenter/u3741.png")-->
            img(:src="userIcon")
          div.xinxi
            router-link(v-bind:to="{name:'PersonalCenter'}")
              p 个人信息
            router-link(v-bind:to="{name:'InQuire'}")
              p 学分查询
            router-link(v-bind:to="{name:'Collection'}")
              p 我的收藏
            router-link(v-bind:to="{name:'History'}")
              p 历史记录
            router-link(v-bind:to="{name:'CourseManagement'}")
              p.information 课程管理
            div(v-if="isTeacher")
              router-link(v-bind:to="{name:'LiveManagement'}")
                p 直播管理
        div.personal-right
          div.title
            span {{username}}
          div.center
            div.centerTop
              span.centerText 该课程现分为{{this.total}}个章节。
              <!--div.centerInp-->
              <!--input(placeholder="请输入课程名称" onfocus="this.placeholder=''" onblur="this.placeholder='请输入课程名称'")-->
              <!--img(src="/static/PublicCourse/搜索_u976.png")-->
              span.centerKke(@click="thelog") + &nbsp;添加章节
              div#black(ref="black" )
              div#black-box(ref="blacks")
                el-form(v-model="formModel" ref="form")
                  div.denglu
                    span.describe 所属章节 :&nbsp;&nbsp;&nbsp;
                    el-input(v-model="formModel.videosName" disabled).inputname
                  div.denglu
                    span.describe 章节名称 :&nbsp;&nbsp;&nbsp;
                    el-input(v-model="formModel.title" placeholder="请输入章节名称" onfocus="this.placeholder=''" onblur="this.placeholder='请输入章节名称'" maxlength="13").inputname
                  div.denglu
                    span.describe 章节排序 :&nbsp;&nbsp;&nbsp;
                    el-input-number(v-model="formModel.sequence" placeholder="请输入章节" onfocus="this.placeholder=''" onblur="this.placeholder='请输入章节'").inputname
                  span.btn.submit(@click="onSubmitClick") 提交
                  span.btn.cancel(@click="disappear") 取消
            div.centerBox
              treeGrid.duty-wrapper(bizKey="treeGrid" ref="treeGrid" v-bind:targetURL="targetURL"
              v-bind:columns='columns'
              v-bind:customRender="showCheckText"
              v-bind:isToolBarSelf="true"
              v-bind:onToolBarSelfClick="onToolBarSelfClick"
              v-on:onCommandBtnClick="onCommandBtnClick"
              v-on:selectedRow="getSelectRow"
              v-on:headCallBack="headCall"
              )
              //kalix-tree-grid()v-bind:treeGridToolbarClick="onTreeGridToolbarClick"
      component(ref="uploadDialog" v-bind:is="whichToShow" v-on:dialogUploadClose="dialogUploadClose")
</template>

<script type="text/ecmascript-6">
  import treeGrid from '../../components/Layout/baseTreeGrid'
  import KalixClansmanUpload from '../../components/corelib/components/common/upload'
  import {baseURL} from '../../config/global.toml'
  import DialogUpload from '../../components/Dialog/DialogUpload'
  import Message from '../../components/Layout/message'

  export default {
    data() {
      return {
        isTeacher: false,
        total: null,
        username: '',
        uid: '',
        userIcon: '',
        currentRow: undefined,
        formModel: {
          id: null,
          hits: null, // 学习人数
          cid: null, // 课程id
          vid: null, // 标题级别
          audit: '禁止', // 审核
          leaf: false,
          videosName: null,
          sequence: null
        },
        whichToShow: 'DialogUpload',
        action: baseURL + '/camel/rest/upload',
        targetURL: null,
        columns: [{
          type: 'hidden',
          key: 'id',
          width: '0'
        }, {
          type: 'hidden',
          key: 'vid',
          width: '0'
        }, {
          title: '名称',
          key: 'title',
          width: '210'
        }, {
          title: '视频',
          key: 'videoUrl',
          width: '150'
        }, {
          title: '学习人数',
          key: 'hits',
          width: '120'
        }, {
          title: '审核',
          key: 'audit',
          width: '120'
        }, {
          title: '操作',
          type: 'action',
          actions: [{
            type: 'edit',
            text: '上传视频',
            icon: 'el-icon-edit'
          }, {
            type: 'delete',
            text: '删除视频',
            icon: 'el-icon-delete'
          }],
          width: '150'
        }],
        falseData: [
          {
            id: 0,
            courseName: '前端小课',
            courseWhen: '126',
            credits: '3',
            teacher: '马老师',
            courseClass: '微课'
          }
        ],
        departments: '', // 院系
        courseName: '', // 课程名称
        courseWhen: '', // 课时
        credits: '', // 学分
        teacher: '', // 授课教师
        courseClass: '', // 课程类别
        coursesCover: '', // 上传课程封面
        courseIntroduce: '', // 课程简介
        videosName: '', // 上传章节
        title: '', // 上传章节名字
        options: [],
        selectClass: [{
          value: '选项1',
          label: '公开课'
        }, {
          value: '选项2',
          label: '精品课'
        }, {
          value: '选项3',
          label: '微课'
        }, {
          value: '选项4',
          label: '直播课'
        }],
        value: '',
        videoId: null
      }
    },
    components: {
      DialogUpload: DialogUpload,
      treeGrid: treeGrid,
      KalixClansmanUpload: KalixClansmanUpload
    },
    mounted() {
      this.username = this.$KalixCatch.get('user_name')
      this.uid = this.$KalixCatch.get('id')
      this.getHeadImg(this.uid)
      this.getDepCascader()
      // this.id = this.$route.params.id
      this.id = JSON.parse(window.sessionStorage.getItem('ids')).id
      console.log('this.id---------', this.id)
      this.targetURL = '/camel/rest/training/videoss/getVideosByVid?cid=' + this.id
      this.getRid()
    },
    methods: {
      renshu() {
        this.formModel.hits = this.formModel.hits.replace(/[^\d]/g, '')
        this.formModel.hits = this.formModel.hits.replace('.', '')
      },
      getRid() {
        console.log('this.uid----------', this.uid)
        this.axios.get('/camel/rest/roles', {
          params: {
            jsonStr: {'name': '教师'}
          }
        }).then(res => {
          console.log('res-------------', res.data)
          if (res.data.totalCount > 0) {
            this.getRole(res.data.data[0].id)
          }
        })
      },
      getRole(rid) {
        this.axios.get('/camel/rest/roles/' + rid + '/users/ids', {
          params: {
            id: rid
          }
        }).then(res => {
          for (let i = 0; i < res.data.length; i++) {
            if (res.data[i] === parseInt(this.uid)) {
              this.isTeacher = true
            }
          }
        })
      },
      headCall(total) {
        if (total) {
          console.log('msg===========', total)
          this.total = total.length
        }
      },
      onToolBarSelfClick() {
        console.log(arguments)
      },
      showCheckText(_data) {
        this.showCheck(_data)
      },
      showCheck(_data) {
        if (_data) {
          _data.forEach((e) => {
            if (e.videoUrl === '' || e.videoUrl === null) {
              e.videoUrl = '未上传'
            } else {
              e.videoUrl = '已上传'
            }
            // e.videoUrl = e.videoUrl === '' || null ? '未上传' : '已上传'
            if (e.children) {
              this.showCheck(e.children)
            }
          })
        }
      },
      getHeadImg(id) {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + `${id}`
        }).then(res => {
          this.userIcon = res.data.data[0].icon
        })
      },
      getSelectRow(val) {
        this.currentRow = val
      },
      getDepCascader() { // 获取院系信息并以级联形式显示
        console.log('getDepCascader========================')
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/departments' + '/getDepCascader'
        }).then(res => {
          this.options = res.data.data
        })
      },
      thelog() {
        this.$refs.black.style.display = 'block'
        this.$refs.blacks.style.display = 'block'
        if (this.currentRow === undefined) {
          this.formModel.videosName = '根目录'
          this.formModel.cid = this.id
          this.formModel.vid = '-1'
        } else {
          this.formModel.videosName = this.currentRow.title
          this.formModel.cid = this.currentRow.cid
          this.formModel.vid = this.currentRow.id
        }
      },
      onSubmitClick() { // 发布验证
        if (this.title === null) {
          this.$KalixMessage.error('请输入章节名称')
          return false
        }
        if (this.hits === null) {
          this.$KalixMessage.error('请输入学习人数')
          return false
        }
        this.submit()
      },
      submit() {
        this.axios.request({
          method: 'POST',
          url: '/camel/rest/training/videoss',
          data: this.formModel
        }).then(res => {
          if (res.data.success) {
            Message.success('添加成功')
            this.$refs['form'].resetFields()
            this.$refs.black.style.display = 'none'
            this.$refs.blacks.style.display = 'none'
            this.$refs.treeGrid.getData()
          }
        })
      },
      disappear() {
        this.$refs.black.style.display = 'none'
        this.$refs.blacks.style.display = 'none'
      },
      onCommandBtnClick(command, item) {
        switch (command) {
          case 'upload':
            this.videoId = item.id
            this.whichToShow = 'DialogUpload'
            this.$nextTick(() => {
              this.$refs.uploadDialog.open()
            })
            break
          case 'delete':
            this.deleteVideo(item)
            break
        }
      },
      deleteVideo(item) {
        this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.$http
            .get('/camel/rest/training/videoss/deleteVideoById', {
              params: {
                id: item.id
              }
            })
            .then(res => {
              this.$refs.treeGrid.getData()
            })
        })
      },
      dialogUploadClose(_fileUrl) {
        if (typeof (_fileUrl) !== 'function') {
          this.whichToShow = null
          this.axios.request({
            method: 'GET',
            url: '/camel/rest/training/videoss/uploadVideoById',
            params: {
              id: this.videoId,
              videoUrl: _fileUrl
            }
          }).then(response => {
            if (response.data) {
              Message.success('上传视频成功')
              this.$refs.treeGrid.getData()
            }
          })
        } else {
          this.whichToShow = null
          this.$refs.treeGrid.getData()
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .bgc
    width 100%
    height 327px
    position absolute
    top 100px
    z-index -1

  .bgc img
    width 100%
    height 100%

  .personal
    width 1200px
    height 718px
    /*background-color: green*/
    background-color: #fff
    margin 0 auto
    margin-top 186px
    position relative
    border-radius 5px
    box-shadow 5px 5px 10px #ccc

  .personal-left
    width 18%
    height 100%
    float left
    position: relative

  .personal-right
    width 80%
    height 100%
    float right

  /*头像*/
  .HeadPortrait
    width 150px
    height 150px
    position: absolute
    right 0
    top -75px

  .HeadPortrait img
    width 100%
    height 100%

  .xinxi
    position absolute
    top 110px
    right 0
    width 150px
    border 1px solid #ccc
    border-radius 5px
    overflow hidden

  .xinxi p
    display block
    width 150px
    height 50px
    text-align center
    line-height 50px
    color #999
    box-sizing border-box
    border-top 1px solid #ccc

  .xinxi .information
    background-color #008F95
    color #fff
    font-weight 700
    border-top none

  /*右侧*/
  .title
    margin-top 36px

  .title span
    font-size 20px
    margin-right 14px
    color #000
    font-weight 700

  .center
    width 905px
    height 520px
    border 1px solid #ccc
    border-radius 5px
    margin-top 54px

  .centerBox
    padding-left 26px
    width 850px
    height 430px
    overflow-y auto
    overflow-x hidden

  .centerP
    display inline-block
    text-align right
    width 110px
    height 36px
    line-height 36px
    font-size 18px

  .centers
    width 25px
    margin-left 16px
    text-algin left

  .centerTop
    margin 20px 30px 10px 26px

  .centerText
    color #008F95
    display inline-block

  .centerInp
    width 350px
    height 30px
    border 2px solid #ccc
    display inline-block
    margin-left 130px
    border-radius 5px
    position relative
    line-height 30px

  .centerInp input
    width 285px
    height 18px
    margin-left 16px
    border none
    outline none

  .centerInp img
    position absolute
    top 5px
    right 20px

  .centerKke
    display inline-block
    width 78px
    height 20px
    background-color: #008F95
    font-size 12px
    color #fff
    border-radius 5px
    text-align center
    line-height 20px
    cursor pointer
    margin-right 60px
    float right

  #black
    width 100%
    height 100%
    background-color #000
    position fixed
    top 0
    left 0
    z-index 2
    opacity 0.3
    display none

  #black-box
    width 480px
    height 320px
    background-color #fff
    position fixed
    left 50%
    top 50%
    margin-left -225px
    margin-top -275px
    z-index 999
    display none
    border-radius 10px
    padding 48px 0 0 34px
    box-sizing border-box
    font-size 14px

  .describe
    display inline-block
    width 100px
    text-align right
    color #525252

  .denglu
    margin 10px 0

  .TextColor
    color #757575

  .textInput
    width 250px
    height 54px
    box-sizing border-box

  .btn
    display inline-block
    width 70px
    height 26px
    text-align center
    line-height 26px
    cursor pointer
    border-radius 5px
    color #fff
    font-size 12px
    margin-top 12px

  .submit
    background-color: #008F95
    margin-left 130px

  .cancel
    background-color: #999
    margin-left 10px

  .File
    opacity 0

  .InpFile
    display inline-block
    width 74px
    height 16px
    background-color: #F2F2F2
    font-size 12px
    color #66667B
    border-radius 5px
    text-align center
    line-height 16px
    position relative
    margin-left 5px

  .InpFile input
    position absolute
    width 100%
    height 100%
    right 0
    top 0
    opacity 0

  .LiColumn li
    width 850px
    height 34px
    background-color #F5FAFD
    margin 5px 0

  .LiColumn span
    display inline-block
    width 121px
    height 34px
    line-height 34px
    text-align center

  // 院系
  .departments
    width 185px

  .inputname
    width 250px
    height 40px

  .upload
    display inline-block
</style>
